<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                template="../../resources/plantilla/ventanaInicioEmpleadoPlantilla.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define  name="formulario">

        <style type="text/css">
            .negro{
                font-weight: bold;
            }
            .titulo{
                font-size: 1.0em;
            }
        </style>

        <div class="panelTitulo">
            PAGUINA PRINCIPAL
        </div> 
        <div style="width: 30%; float:left;">
            <h:form id="butonRealizarPago">
                <p:panel id="pago" header="Estado de Cuenta {usuarioController.estadoCuenta()}" footer="Informacion" style="border: none; width: 100%;" >
                    <p:graphicImage value="../../resources/images/icon-retail-payments.png" width="100" height="100" style="margin-left:30%;"/>
                    
                    <h:panelGrid 
                        columns="2" 
                        border="0"
                        columnClasses="column1Class, column2Class">
                        <p:outputLabel value="ID USUARIO:"/>
                        <p:outputLabel  value="#{usuarioController.selected.idUsuario}"/>
                        <p:outputLabel  value="FECHA PAGO:"/>
                        <p:outputLabel   value="#{usuarioController.sistemaUsuario.fechaAsignacion}">
                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" /> 
                        </p:outputLabel>
                        <p:outputLabel  value="FECHA CADUCIDAD:"/>
                            
                      
                        <p:outputLabel   value="#{usuarioController.sistemaUsuario.fechaCaducidad}">
                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm" /> 
                        </p:outputLabel>
                        <c:if test="#{usuarioController.sistemaUsuario.estado=='V'}">

                        </c:if>
                        <c:choose>
                            <c:when test="#{usuarioController.sistemaUsuario.estado=='V'}">
                                <p:outputLabel  value="ESTADO CUENTA:"/>
                                <p:outputLabel   value="No Pagado"/>
                                <p:commandButton value="Realizar Pago" oncomplete="PF('displayPago').show()"/>
                            </c:when>
                            <c:when test="#{usuarioController.sistemaUsuario.estado=='E'}">
                                <p:outputLabel  value="ESTADO CUENTA:"/>
                                <p:outputLabel   value="Espera"/>
                            </c:when>
                            <c:when test="#{usuarioController.sistemaUsuario.estado=='P'}">
                                <p:outputLabel  value="ESTADO CUENTA:"/>
                                <p:outputLabel   value="Pagado"/>
                            </c:when>
                        </c:choose>
                        <p:commandButton value="Actualizar" actionListener="#{usuarioController.estadoCuenta()}" ajax="false"/>
                    </h:panelGrid>

                </p:panel>
                <p:panel id="oferta" header="ofertas de Empleo" footer="Informacion" style="border: none; width: 100%;">
                    <p:graphicImage value="../../resources/images/jobsearch_icon.png" width="100" height="100" style="margin-left:30%;"/>
                    <p:commandButton value="Ver Ofertas de Trabajo"/>
                </p:panel>
            </h:form>
        </div>
        <div style="width: 50%; float:left;">
            <p:panel id="panelPerfil" header="Datos Personales" style="border: none; width: 100%;" >
                <div style="width: 20%; float:left;">
                    <p:lightBox styleClass="imagebox" id="lighbox1"> 
                        <h:outputLink value="#{usuarioController.selected.url}" title="Foto de Perfil">
                            <h:graphicImage  id="fotoPerfil" value="#{usuarioController.selected.url}" height="150" width="150" />
                        </h:outputLink>
                    </p:lightBox>

                    <div style="margin: 0px auto; width: 150px;">
                        <h:link value="Editar Perfil" outcome="/configuraciones/usuario/inicio" styleClass="link"/>
                    </div>
                </div>
                <div style=" width: 50%; float:left; margin-left: 55px; border-left-width: 10px;">
                    <div style="font-size: 1.5em; color: #0066ff;">#{usuarioController.selected.nombres.toUpperCase()} #{usuarioController.selected.apellidos.toUpperCase()}</div>
                    <div style="font-size: 1.2em;">Genero: #{(usuarioController.selected.genero=='M')? 'MASCULINO':'FEMENINO'}</div>
                    <div style="font-size: 1.2em;">Cedula/Pasaporte: #{usuarioController.selected.identidad}</div>
                    <div style="font-size: 1.2em;">Edad: #{usuarioController.selected.edad}</div>
                    <div style="font-size: 1.2em;">Telefono/Celular: #{usuarioController.selected.telefonoFijo}</div>
                    <div style="font-size: 1.2em;">Celular: #{usuarioController.selected.telefonoMovil}</div>
                    <div style="font-size: 1.2em;">Email: #{usuarioController.selected.correoElectronico}</div>
                    <div style="font-size: 1.2em;">Dirección: #{usuarioController.selected.direccion}</div>
                </div>
            </p:panel>
        </div>
        <div style="width: 20%; float:left;">
            <p:panel id="panelCV" header="Actualizar Hoja de Vida" style="border: none; width: 98%; margin: 0px auto; " >

                <h:link outcome="/configuraciones/usuario/inicio"  styleClass="link">
                    <p:graphicImage url="../../resources/images/hojadevida.gif" width="100" height="100" style="margin-left: 50px;" />
                </h:link>

            </p:panel>
            <h:form>
                <p:panel id="panelNotificaciones" header="Ofertas de Empleo"  style="border: none; width: 98%; height: 200px;" >
                    <p:scrollPanel  style="border: none; width: 104%; height: 200px;"  mode="native">

                        <c:forEach items="#{personalRequeridoController.items}" var="item">
                            <p:separator style="border-color:#ececec; border-width: 0.1em; box-shadow: none;"/> 
                            <p:commandLink styleClass="linkBuscaTrabajo" 
                                           update="carDetail" 
                                           action="#{personalRequeridoController.empleo}"
                                           actionListener="#{empleoRequeridoController.prepareCreate}"
                                           oncomplete="PF('display').show()" >

                                <div style="float: left;">
                                    <img src="http://www.frikipedia.es/images/7/7a/1_Empresa.png" alt="" width="50px" height="50px"/>
                                </div>
                                <div style="float: left;">
                                    <div class="negro titulo">#{item.idEmpresa.nombre}</div>
                                    <div>Cargo: #{item.idHabilidades.nombre}</div>
                                    <div>Ciudad: #{item.idCiudad.nombre}</div>
                                </div>
                                <div style="clear:both;"/>
                            </p:commandLink>
                        </c:forEach>

                    </p:scrollPanel>
                    <p:commandLink value="Ver mas Oferntas" actionListener="#{controlUrlControler.openOfertasTrabajo()}"/>
                </p:panel>

                <p:dialog id="dialogAplicarEmpleo" header="Aplicar Trabajo" modal="true" widgetVar="display" style="width: 300px;">

                    <h:panelGrid id="carDetail" columns="2" border="0" style="border: none;">
                        <p:outputLabel value="Empresa:" for="empresa"/>
                        <p:inputText id="empresa" value="#{personalRequeridoController.selected.idEmpresa.nombre}" size="35" readonly="true"/>

                        <p:outputLabel value="Cargo:" for="cargo"/>
                        <p:inputText id="cargo" value="#{personalRequeridoController.selected.idHabilidades.nombre}" size="35" readonly="true"/>

                        <p:outputLabel value="Fecha:" for="fecha"/>
                        <p:inputText id="fecha" value="#{personalRequeridoController.selected.fechaModificacion}" size="35" readonly="true"/>

                        <p:outputLabel value="Ciudad:" for="ciudad"/>
                        <p:inputText id="ciudad" value="#{personalRequeridoController.selected.idCiudad.nombre}" size="35" readonly="true"/>

                        <p:outputLabel value="Descripcion:" for="descripcion"/>
                        <p:inputTextarea id="descripcion" value="#{personalRequeridoController.selected.descripcion}" rows="6" cols="37"  readonly="true"/>

                    </h:panelGrid>
                    <div>
                        <p:commandButton id="butonAplicarTrabajo" actionListener="#{empleoRequeridoController.guardaNuevo}" ajax="false"  value="APLICAR"/>
                        <p:commandButton id="cancelar" value="CANCELAR"/>
                    </div>
                </p:dialog>
            </h:form>
        </div>
        <div style=" clear:both; width: 70%; float:left;">

        </div>
        <p:dialog id="dialogRealizarPago" header="Realizar Pago" modal="true" widgetVar="displayPago" style="width: 300px;">
            <h:form id="formPago">
                <p:growl id="messagesRealizarPago" showDetail="true" />
                <h:panelGrid id="detalles" columns="2" border="0" style="border: none;">
                    <p:graphicImage value="../../resources/images/Financial_Transactions-128.png"/>
                    <h:panelGrid id="carDetail"
                                 columns="2"
                                 border="0"
                                 columnClasses="column1Class, column2Class"
                                 style="border: none;">
                        <p:outputLabel value="Numero de Deposito" for="deposito" />
                        <p:inputText id="deposito" 
                                     value="#{usuarioController.pagos.numeroDeposito}" 
                                     required="true"
                                     validatorMessage="Ingrese el Numero de Deposito"
                                     title="Numero de deposito en la Cuenta bancaria" />
                    </h:panelGrid>
                </h:panelGrid>
                <div style="margin-left: 40%;">
                    <p:commandButton id="pagar"
                                     actionListener="#{usuarioController.pagosDeposito}"
                                     update="messagesRealizarPago"
                                     value="Realizar Pago">
                        <p:confirm header="Confirmacion" message="Esta seguro que el numero de deposito es el correcto?" icon="ui-icon-alert" />
                    </p:commandButton>
                    <p:commandButton id="cancelar" value="Cancelar" onclick="displayPago.hide();"/>
                </div>
                <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
                    <p:commandButton value="Yes" type="button" ajax="false" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="No" type="button" ajax="false" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
            </h:form>
            <p:panel id="basic" header="SUSCRIPCION EN SERVIVIOS EMPLEOS Y TALENTOS"  style=" margin-top: 20px;margin-bottom:20px; border: none;">
                    <h:panelGrid columns="1" cellpadding="10">
                        <h:outputText
                            value="PRIMERO:" style="font-weight: bold; color: #0480be ; text-align: center"/>
                        <h:outputText
                            value="Llena tu FICHA ELECTRÓNICA, con todos los datos correspondientes a tu HOJA DE VIDA o Curriculum Vitae (CV)" />
                        <h:outputText
                            value="SEGUNDO: PAGO DE LA SUSCRIPCION" style="font-weight: bold; color: #0480be"/>
                        <h:outputText
                            value="Para acceder a los Beneficios de “Servicios Empleos y Talentos SEMPTAC CIA. LTDA.”  y poder ingresar al Basto mundo Laboral debes de cancelar la membrecía correspondiente a DIEZ DOLARES AMERICANOS  $10,00 correspondientes a la suscripción indefinida en la Compañía.
                            NOTA: Si deseas que llenemos tu hoja de vida en la plataforma comunícate con nosotros al correo semptac.ecu@hotmail.com o al teléfono 0987835870, este servicio tendrá un valor adicional de CINCO DOLARES AMERICANOS  $5,00. 
                            El Pago lo podrás realizar en:" />
                        <h:outputText
                            value="BANCO PICHINCHA:" style="font-weight: bold; "/>
                        <h:outputText
                            value="Cuenta corriente # 2100092029, cuenta a nombre de SERVICIOS EMPLEOS Y TALENTOS. 
                            En Cualquiera de las Agencias Banco Pichincha a Nivel Nacional o en Pichincha mi Vecino." />
                        <h:outputText
                            value="BANCO DE GUAYAQUIL" style="font-weight: bold; "/>
                        <h:outputText
                            value="Cuenta de Ahorros # 22556147, a nombre de Franklin Ortiz.
                            En cualquiera de las Agencias Banco de Guayaquil a Nivel Nacional o en Banco del Barrio." />
                        <h:outputText
                            value="COOPERATIVA DE AHORRO Y CREDITO JARDÍN AZUAYO" style="font-weight: bold; "/>
                        <h:outputText
                            value="Cuenta de Ahorros # 1981999, a nombre de Franklin Ortiz.
                            En cualquiera de las Agencias de COP. Jardín Azuayo." />
                        <h:outputText
                            value="Una vez realizado el pago ingresa el NUMERO DE DEPOSITO CORRESPONDIENTE en el BOTON de número de cuenta en la página principal de usuario y quedaras suscrito. Además envíanos tu papeleta de depósito escaneada o una foto de ella al correo electrónico semptac.ecu@hotmail.com" />
                        <h:outputText
                            value="Una vez suscrito tus Datos serán vistos por todas las EMPRESAS, COMPAÑIAS, MUNICIPIOS, ENTIDADES PUBLICAS, PRIVADAS Y DEMAS NEGOCIOS SUSCRITOS A NIVEL NACIONAL, para de esta manera conseguir el empleo que tanto necesitas." />
                        <h:outputText
                            value="TERCERO" style="font-weight: bold; color: #0480be"/>
                        <h:outputText
                            value="BENEFICIOS DE NUESTROS MIEMBROS" />
                        <h:outputText
                            value="* SUSCRIPCION INDEFINIDA O HASTA CONSEGUIR UN EMPLEO." />
                        <h:outputText
                            value="* GESTION RAPIDA, OPORTUNA Y EFICIENTE PARA CONSEGUIR TU EMPLEO DESEADO." />
                        <h:outputText
                            value="* GESTION EN TODOS LAS EMPRESAS, COMPAÑIAS, NEGOCIOS, MUNICIPIOS, ENTIDADES PÚBLICAS Y PRIVADAS SUSCRITAS A NIVEL NACIONAL, PARA CONSEGUIR TU EMPLEO DESEADO CON LA MAYOR BREVEDAD POSIBLE." />

                        <h:outputText
                            value="* PUBLICIDAD DE TUS DATOS, CV u HOJA DE VIDA EN TODAS LAS EMPRESAS, COMPAÑIAS, NEGOCIOS, MUNICIPIOS, ENTIDADES PÚBLICAS Y PRIVADAS SUSCRITAS A NIVEL NACIONAL." />

                        <h:outputText
                            value="* ACCESO A TODOS LOS CLASIFICADOS LABORALES PUBLICADOS POR TODAS LAS EMPRESAS, COMPAÑIAS, NEGOCIOS, MUNICIPIOS, ENTIDADES PÚBLICAS Y PRIVADAS SUSCRITAS A NIVEL NACIONAL." />

                        <h:outputText
                            value="* MANEJO RESPONSABLE DE TUS DATOS." />
                    </h:panelGrid>
                </p:panel>
            <f:facet name="footer">
                <div style="height: 50px;">
                    <div style="color: red;">Importante:</div>
                    <div style="color: #0066ff;">Una vez comprovado los datos padra aplicar a los trabajos</div>
                </div>

            </f:facet>

        </p:dialog>

    </ui:define>
</ui:composition>
